<template>
	<div>
		<div class="tabNav">
			<img src="../assets/img/sidebar1.png" />首页
			<b>/<i style="font-size: 15px;margin-right: 5px;" class="el-icon-lx-people"></i>个体户办理</b>
			<el-input
					placeholder="请输入姓名/手机号/身份证号进行搜索"
					suffix-icon="el-icon-search"
					@change="searchMethods"
					v-model="searchValue">
			</el-input>
			
			<em>
				<i class="el-icon-s-data" data-v-7efbb0b8="" style="font-size: 16px; margin-right: 5px;"></i>
				服务者数量：{{ total }}
			</em>
		</div>
		
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee cardTitcc" shadow="hover">
					<div v-if="activeName == 0" class="excelDownload">
						<el-button size="small" type="primary" @click="clearFiles">指定名单下载</el-button>
					</div>
					<el-tabs class="tab-personal" v-model="activeName">
						<el-tab-pane label="全部" name="0">
							<personal-table v-if="activeName == 0" ref="searchMethods0" @changeTab="changeTab" @getTotal="getTotal" :search="searchValue" :personalType="0"></personal-table>
						</el-tab-pane>
						<el-tab-pane label="未办理" :lazy="true" name="1">
							<personal-table v-if="activeName == 1" ref="searchMethods1" @changeTab="changeTab" :search="searchValue" :personalType="1"></personal-table>
						</el-tab-pane>
						<el-tab-pane label="办理中" :lazy="true" name="2">
							<personal-table v-if="activeName == 2" ref="searchMethods2" @changeTab="changeTab" :search="searchValue" :personalType="2"></personal-table>
						</el-tab-pane>
						<el-tab-pane label="已办理" :lazy="true" name="3">
							<personal-table v-if="activeName == 3" ref="searchMethods3" @changeTab="changeTab" :search="searchValue" :personalType="3"></personal-table>
						</el-tab-pane>
						<el-tab-pane label="被驳回" :lazy="true" name="4">
							<personal-table v-if="activeName == 4" ref="searchMethods4" @changeTab="changeTab" :search="searchValue" :personalType="4"></personal-table>
						</el-tab-pane>
						<el-tab-pane label="已注销" :lazy="true" name="5">
							<personal-table v-if="activeName == 5" ref="searchMethods4" @changeTab="changeTab" :search="searchValue" :personalType="5"></personal-table>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
		
		<!-- 指定名单下载 -->
		<el-dialog
		title="指定名单下载"
		custom-class="examine-style"
		v-model="designatedList"
		width="50%"
		>
			<div class="designatedList">
				<el-upload
				multiple
				ref="my-upload"
				class="upload-demo upload-demos"
				action=""
				:limit="1"
				:file-list="fileList"
				:before-remove="beforeRemove"
				:http-request="(file) => handleChange(file, 'huizhiUrl')"
				>
				<el-button v-if="!designatedListShow" size="small" type="primary">点击上传Excel名单</el-button>
				</el-upload>
				<el-button size="small" type="primary" @click="listTemplate">点击下载名单模板</el-button>
				<div v-if="designatedListShows">
					<div class="cardTits" style="margin: 30px 0;">
						<div v-if="downLoadTip" class="downLoadTips">结果：{{downLoadTips}}</div>
						<el-table v-if="!downLoadTip" :data="downloadCon" ref="multipleTable" stripe style="width: 100%">
						<el-table-column prop="name" label="姓名">
						</el-table-column>
						<el-table-column prop="idcard" label="身份证号">
						</el-table-column>
						<el-table-column prop="failReason" label="原因">
						</el-table-column>
						</el-table>
						<!-- <el-pagination
						v-if="tableData.length > 0"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="arrPage"
						:page-size="selectPage"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total"
						>
						</el-pagination> -->
					</div>
					<el-button v-if="!downLoadTip" size="small" type="primary" @click="openUrl(failUrl)">未成功名单下载</el-button>
					<b v-if="!downLoadTip">以上表格内的服务者未下载成功，其余人员已成功生成下载文件。</b>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import axios from "axios";
	import PersonalTable from '../components/table/PersonalTable.vue'
	export default {
		name: "dashboard",
		data() {
			return {
				fileList: [],
				downloadCon: [],
				failUrl: '',
				designatedList: false,
				designatedListShow: false,
				designatedListShows: false,
				downLoadTip: false,
				tableData: [],
				activeName: '0',
				searchValue: '',
				downLoadTips:'',
				total: 0
			}
		},
		components: {
			PersonalTable
		},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},
		mounted() {
		},
		methods: {
			handleChange(param) {
				let loginUserName = localStorage.getItem("hegui_username");
				this.designatedListShow = true;
				// 上传凭证文件
				let formList = new FormData();
				// let getTime = new Date().getTime()
				formList.append("file", param.file);
				formList.append("fileRes", "10002");
				formList.append("loginUserName", loginUserName);
				formList.append("fileName", "指定名单下载" + this.format("yyyyMMddhhmmss", new Date()));
				formList.append("excelFileName", "指定名单下载"+ this.format("yyyyMMddhhmmss", new Date()));
				axios({
					method: "POST",
					url: "/api/download/downloadSelfAnnexByExcel",
					headers: {
						"content-type": "multipart/form-data",
						Authorization: localStorage.getItem("hegui_token")
					},
					data: formList,
				})
				.then((data) => {
					if (data.data.code == 0) {
						this.$message.success("已添加至下载列表，请到下载列表中查看下载");
						if(data.data.result.failReasons == ''){
							console.log(111)
						}else{
							this.downloadCon = data.data.result.failReasons;
							this.failUrl = data.data.result.failUrl;
							this.designatedListShows = true;
							this.downLoadTip = false;
						}
						
					}else{
						this.downLoadTips = data.data.msg;
						this.downLoadTip = true;
						this.designatedListShows = true;
						// this.$message.error(data.data.msg);
					}
				})
				.catch((err) => {
					console.log(err);
				});
			},
			beforeRemove() {
				this.designatedListShow = false;
				this.designatedListShows = false;
			},
			getPersonalData() {
			// 获取个体户办理状态
			// console.log(this.personalType)
				// 获取个体户列表
				this.$http({
					url: "/api/selfbusiness/selectSelfBusinessByStatus",
					method: "post",
					headers: {
					"Content-Type": "application/json",
					},
					data: {
					mixedStr: this.search,
					processStatus: this.personalType,
					pageNum: this.currentPage,
					pageSize: this.selectPage,
					},
				}).then((data) => {
					if (data.code === 0) {
					this.tableData = data.result.list;
					this.total = data.result.total;
					}
				});
			},
			listTemplate() {
				// 点击下载名单模板
				this.$http({
					url: "/api/download/getSelfHandleTemplateUrl",
					method: "GET",
					headers: {
						"Content-Type": "application/json",
					}
				}).then((res) => {
					window.open(res);
				});
			},
			getTotal(val) {
				// console.log(val)
				this.total = val
			},
			clearFiles(){
				this.designatedList = true;
				this.designatedListShow = false;
				this.designatedListShows = false;
				if(this.$refs['my-upload'] != undefined){
					this.$refs['my-upload'].clearFiles();
				}
			},
			searchMethods() {
				// 搜索
				let name = 'searchMethods' + this.activeName
				if(this.$refs[name]) {
					this.$refs[name].getPersonalData()
				}
			},
			changeTab(val) {
				this.activeName = val
				this.searchMethods()
			},
			openUrl(url) {
				// 打开新窗口查看协议
				// let newwin = window.open();
				// newwin.document.write("<img src=" + url + " />");
				window.open(url);
			},
		}
	};
</script>
<style>
.upload-demos .el-upload {
	width: auto;
	height: auto;
	border: oldlace;
	background: none;
}
.designatedList .upload-demo .el-upload-list {
	float: left;
	margin-top: -5px;
}
.designatedList .upload-demos .el-upload {
	float: left;
}
</style>
<style lang="scss" scoped>
	.upload-demo {
		width: 80%;
		float: left;
	}
	.designatedList span {
		margin-left: 20px;
	}
	.designatedList a {
		cursor: pointer;
		color: #326CF0;
		margin-right: 20px;
	}
	.designatedList b {
		color: #606266;
		font-weight: normal;
		font-size: 12px;
		margin-left: 20px;
	}
	.excelDownload {
		position: absolute;
		right: 30px;
		top: 14px;
		cursor: pointer;
		z-index: 111;
	}
	.tab-personal {
		background-color: #FFFFFF;
		:deep(.el-tabs__header)  {
			margin-bottom: 10px;
			padding: 8px 20px 0;
		}
		:deep(.el-tabs__item) {
			color: #0A2E6A;
			font-weight: normal;
		}
		:deep(.el-tabs__item.is-active) {
			color: #326CF0;
			font-weight: 500;
		}
		:deep(.el-tabs__nav-wrap::after) {
			background-color: #FFFFFF;
		}
		:deep(.el-tabs__active-bar) {
			background-color: #326CF0;
			height: 4px;
			border-radius: 2px;
		}
	}
</style>
